﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = new Array();

            var firstNames = [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];

            var lastNames = [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];

            var productNames = [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];

            var priceValues = [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];

            for (var i = 0; i < 200; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);

                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;

                data[i] = row;
            }

            var source = {
                localData: data,
                dataType: "array",
                dataFields: [{
                    name: 'firstname',
                    type: 'string'
                }, {
                    name: 'lastname',
                    type: 'string'
                }, {
                    name: 'productname',
                    type: 'string'
                }, {
                    name: 'quantity',
                    type: 'number'
                }, {
                    name: 'price',
                    type: 'number'
                }, {
                    name: 'total',
                    type: 'number'
                }]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [{
                text: 'Name',
                dataField: 'firstname',
                width: 200
            }, {
                text: 'Last Name',
                dataField: 'lastname',
                width: 200
            }, {
                text: 'Unit Price',
                dataField: 'price',
                width: 90,
                cellsAlign: 'right',
                align: 'right',
                cellsFormat: 'c2'
            }, {
                text: 'Total',
                dataField: 'total',
                cellsAlign: 'right',
                align: 'right',
                cellsFormat: 'c2'
            }];
            $("#table1").jqxDataTable({
                width: '100%',
                height: '100%',
                source: dataAdapter,
                columns: columns
            });

            var dataAdapter2 = new $.jqx.dataAdapter(source);
            $("#table2").jqxDataTable({
                width: '100%',
                height: '100%',
                source: dataAdapter2,
                columns: columns
            });

            $("#jqxDocking").jqxDocking({
                width: 800
            });
            $('#jqxDocking').jqxDocking('showAllCollapseButtons');
        });
    </script>
</head>
<body class='default'>
    <div id="jqxDocking">
        <div>
            <div id="window1">
                <div>Header 1</div>
                <div style='overflow: hidden; height: 200px;'>
                    <div id="table1"></div>
                </div>
            </div>
            <div id="window2">
                <div>Header 2</div>
                <div style='overflow: hidden; height: 200px;'>
                    <div id='table2'></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
